<template>
  <CommonCard title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <div class="total-footer">
        <span>日同比</span>
        <span class="emphasis">&nbsp;{{userGrowthLastDay}}%</span>&nbsp;
        <span class="increment"></span>
        <span>&nbsp;月同比</span>
        <span class="emphasis">&nbsp;{{userGrowthLastMonth}}%</span>&nbsp;
        <span class="decrement"></span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue';
export default {
  name: 'TotalUsers',
  components: {
    CommonCard
  }
};
</script>
<script lang="ts" setup>
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { ref, onMounted, computed, watch } from 'vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

// 定义页面中的标签对象
const barChartRef = ref();
let barChart: EChartsType;

// 1. 累计用户数
const usersTotal = computed(() => reportDataStore.reportData.usersTotal);
// 2. 上个月用户数
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth);
// 3. 日增长
const userGrowthLastDay = computed(() => reportDataStore.reportData.userGrowthLastDay);
// 4. 月增长
const userGrowthLastMonth = computed(() => reportDataStore.reportData.userGrowthLastMonth);

// 准备配置项 根据配置项内容生成图形结构
const getOption = () => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      min: 0,
      max: 100,
      show: false
    },
    yAxis: {
      show: false, // 垂直那些线也不要
      data: ['一月'] // x轴数据列表
    },
    series: [
      {
        type: 'bar',
        // data: orderTrend.value,
        data: [68],
        barWidth: 10,
        // 显示柱条的背景颜色
        showBackground: true,
        label: {
          // 显示引导线
          show: true,
          formatter: '|',
          position: 'right',
          color: 'orangered'
        }
      }
    ]
  };
};

onMounted(() => {
  // ref格式的数据，在setup中使用的时候，一定要通过.value的方式来使用
  barChart = echarts.init(barChartRef.value);
  barChart.setOption(getOption());

  //实现响应式效果
  window.addEventListener('resize', () => {
    barChart && barChart.resize();
  });
});
</script>


<style lang="scss" scoped>
.total-footer {
  display: flex;
  align-items: center;
}
</style>